import { observer } from "mobx-react-lite";
import { Flag } from "../Icon/Flag";
import { TriangleRight } from "../Icon/TriangleRight";
import { AssetProperty } from "./AssetProperty";

const SlotProperty = observer((props: any) => {
    return (
        <div className='text-sm space-y-2 p-3 flex flex-col h-full'>
            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Name:</div>
                <div className='flex-1 flex justify-start'>
                    <input
                        type="text"
                        className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black"
                        value="11"
                    />
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Type:</div>
                <div className='flex-1 flex justify-start'>
                    Slot
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Color:</div>
                <div className='flex-1 flex justify-start space-x-2'>
                    <div className='w-14 h-5 bg-gray-300 border-2 border-white'>
                    </div>
                    <Flag></Flag>
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>BlendMode:</div>
                <div className='flex-1 flex justify-start'>
                    <select id="countries" className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black">
                        <option selected>Choose a mode</option>
                        <option value="US">Normal</option>
                        <option value="CA">Add</option>
                        <option value="FR">Erase</option>
                    </select>
                </div>
            </div>

            <div className="flex">
                <div className='basis-24 shrink-0 flex justify-start items-center'>Alpha:</div>
                <div className='flex-1 flex justify-start items-center space-x-2'>
                    <div className="w-24 bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                        <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: "45%" }}></div>
                    </div>
                    <input
                        type="text"
                        className="w-12 rounded-sm border-gray-200 shadow-sm p-0 text-black"
                        value="11"
                    />
                    <span>%</span>
                    <Flag></Flag>
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Display:</div>
                <div className='flex-1 flex justify-start space-x-2'>
                    <select id="countries" className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black">
                        <option selected>Choose a mode</option>
                        <option value="US">Normal</option>
                        <option value="CA">Add</option>
                        <option value="FR">Erase</option>
                    </select>
                    <Flag></Flag>
                </div>
            </div>

            <span className="flex items-center">
                <TriangleRight></TriangleRight>
                <span className="h-px flex-1 bg-gray-200"></span>
                <span className="shrink-0 px-6">Asset Property</span>
                <span className="h-px flex-1 bg-gray-200"></span>
            </span>

            <AssetProperty></AssetProperty>


        </div>
    );
});


export { SlotProperty };